<template>
  <div class="footer-guide">
    <span class="guide-item" :class="{on: '/msite' === $route.path}" @click="goRoute('/msite')">
      <span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-31shouyexuanzhong"></use>
        </svg>
      </span>
      <span>首页</span>
    </span>
    <span class="guide-item" :class="{on: '/order' === $route.path}" @click="goRoute('/order')">
      <span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-dingdandingdanchaxun"></use>
        </svg>
      </span>
      <span>订单</span>
    </span>
    <span class="guide-item" :class="{on: '/collection' === $route.path}" @click="goRoute('/collection')">
      <span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shoucang"></use>
        </svg>
      </span>
      <span>收藏</span>
    </span>
    <span class="guide-item" :class="{on: '/profile' === $route.path}" @click="goRoute('/profile')">
      <span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yangshi_icon_tongyong_my_account"></use>
        </svg>
      </span>
      <span>我的</span>
    </span>
  </div>
</template>
<script>
export default {
  data () {
    return {
    };
  },
  methods: {
    goRoute (path) {
      // 使用catch捕获异常，这样点两次同一个页面就不会报错了
      this.$router.replace(path).catch(err => err);
    }
  }
};
</script>
<style lang="scss" scoped>
  .footer-guide {
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 50px;
    display: flex;
    .guide-item {
      display: flex;
      flex: 1;
      text-align: center;
      flex-direction: column;
      align-items: center;
      margin: 5px;
      color: #999;
      span {
        font-size: 12px;
        margin-top: 2px;
        margin-bottom: 2px;
        svg {
          font-size: $iconFont;
        }
      }
    }
    .on {
      color: $color;
    }
  }
</style>
